<template>
 <div class='recommendWarp'>
    <div class='title'>热销推荐 </div>
    <ul>
        <template v-for='item of recommendList'>
         <router-link tag='li' class="item-warper border-bottom"
          :key='item.id' :to=" '/detail/'+ item.id">
            <img class='item-img' :src="item.imgUrl" alt="">
            <div class="item-right">
                <p class='item-info'>{{item.title}}</p>
                <p class='item-desc'>{{item.desc}}</p>
                <button class='item-button'>查看详情</button>
             </div>
          </router-link>
        </template>
    </ul>
 </div>
</template>
<script>
export default{
    name:'HomeRecommend',
    props: {
        recommendList: Array
    }
}
</script>
<style lang="stylus" scoped>
@import '~@styles/mixins.styl'
.recommendWarp
 height auto
 width:100%

 .title
  margin-top .2rem
  text-align left
  text-indent 0.1rem
  height .6rem
  line-height 0.6rem
  background-color #eee

 .item-warper
  overflow hidden
  display flex
  height 1.9rem

.item-img
   width 1.7rem
   height 1.7rem
   padding .1rem

.item-right
 flex 1
 padding .1rem
 text-align left
 min-width 0

.item-right>p

.item-info
 line-height .54rem
 font-size .32rem
 ellipsis()

.item-desc
 font-size 0.28rem!important
 color #ccc

.item-button
 margin-top 0.2rem
 background-color #ff9300
 padding 0.03rem
 border-radius .05rem
 color white
 font-size 12px
</style>
